/*
 * @Date: 2022-03-29 11:45:02
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-12 09:31:31
 * @FilePath: /payment/pay/src/pages/Agency/AgencyDetail.jsx
 */
import React from 'react'
import Tab from '../../components/Tabs'
import zhCN from "antd/es/locale/zh_CN";
import axios from '../../util/axios';
import { useState, useEffect } from 'react';

import {
  Button,
  Form,
  Select,
  Table,
  DatePicker,
  Col,
  ConfigProvider
} from 'antd';

import { SearchOutlined, } from '@ant-design/icons';

const { RangePicker } = DatePicker
const data = [
  // {
  //   key: '1',
  //   id: '1185',
  //   type: '代付账变',
  //   name: 'test',
  //   card: 2022012701069707,
  //   dd: 'SHCZ202203291243293226568',
  //   money: 5010200.00,
  //   tmoney: '-100.00',
  //   zmonye: 5010100.00,
  //   bz: '商户充值冲正',
  //   time: '2022-03-29 14:11:32',

  // },


];

const { Option } = Select;
const columns = [
  {
    title: '记录ID',
    width: 120,
    dataIndex: 'id',
    key: 'name',
    fixed: 'left',
    sorter: {
      compare: (a, b) => a.id - b.id,
      multiple: 2,
    },
    align: 'center'
  },
  {
    title: '类型',
    width: 120,
    dataIndex: 'leiXing',
    key: 'age',
    sorter: {
      compare: (a, b) => a.type - b.type,
      multiple: 1,
    },
    align: 'center',
    render: (text, record, index) => {
      return record.leiXing === '充值' ? <span style={{ color: 'red' }}>充值</span> : record.leiXing === '提现' ? <span style={{ color: 'greenyellow' }}>提现</span> : record.leiXing === '商家已付款' ? <span style={{ color: 'blue' }}>商家已付款</span> : ''
    }
  },
  { title: '卡商名称', dataIndex: 'nickName', key: '1', width: 100, align: 'center' },
  { title: '卡商号', dataIndex: 'name', key: '2', width: 180, align: 'center' },
  { title: '订单号', dataIndex: 'liuShuiHao', key: '3', width: 250, align: 'center' },
  { title: '变动前金额', dataIndex: 'bianHuaQianJE', key: '4', align: 'center' },
  {
    title: '变动金额', dataIndex: 'bianHuaJinE', key: '5', align: 'center',
    render: (text, record, index) => {
      return record.bianHuaJinE > 0 ? <span style={{ color: 'greenyellow' }}>{record.bianHuaJinE}</span> : record.tmoney < 0 ? <span style={{ color: 'red' }}>{record.bianHuaJinE}</span> : ''
    }


  },
  { title: '变动后金额', dataIndex: 'bianHuaHouJE', key: '6', align: 'center' },
  // { title: '备注', dataIndex: 'bz', key: '7', align: 'center' },
  { title: '操作时间', dataIndex: 'caoZuoShiJian', key: '7', width: 200, align: 'center' },


];

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',

    name: record.name,
  }),
};


export default function AgencyDetail () {

  //分页
  const [limits, setLimits] = useState('10')
  const [pages, setPages] = useState('1')
  // let limits = '';
  // let pages = '';
  const getPages = (curret, pageSize) => {
    setLimits(pageSize)
    setPages(curret)
    //修改分页及每页多少条数据
  }


  const [data, setData] = useState();

  //进入页面请求数据渲染页面
  useEffect(() => {

    axios({
      method: 'get',
      url: '/ziJinMingXi',
      params: {
        limit: limits.toString(),
        name: 'sh123',
        page: pages.toString(),


      }
    }).then((res) => {
      console.log(res.data);

      let dataArr = [];
      for (let i = 0; i < res.data.length; i++) {//循环数组给每个数组里的对象增加一个属性key
        res.data[i].key = i
        dataArr.push(res.data[i])
      }
      console.log(dataArr);
      // let dataArr = []
      // dataArr.push(res.data)
      setData(dataArr) //更改表格数据

    }).catch((err) => {
      console.log(err);
    })
  }, [])



  //搜索
  const onSubmit = (fieldsValue) => {
    // const rangeValue = fieldsValue['起止时间']

    // const values = {
    //   ...fieldsValue,
    //   '起止时间': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
    // }
    // console.log(rangeValue);
    console.log(fieldsValue);
    console.log(fieldsValue.state);
    axios({

      method: 'get',
      url: '/ziJinMingXi',
      params: {
        limit: '5',
        name: 'sh123',
        page: '1',
        leiXing: fieldsValue.state


      }
    }).then((res) => {

      console.log(res.data);
      let dataArr = [];
      for (let i = 0; i < res.data.length; i++) {//循环数组给每个数组里的对象增加一个属性key
        res.data[i].key = i
        dataArr.push(res.data[i])
      }
      console.log(dataArr);
      // let dataArr = []
      // dataArr.push(res.data)
      setData(dataArr)

    })
  };


  return (
    <div>
      <div>

        <Tab title={'代付资金明细'} />
      </div>

      <div>
        <ConfigProvider locale={zhCN}>
          <Form
            name="search-form"
            layout='inline'
            size='large'
            onFinish={onSubmit}
          >


            <Col span={5} style={{ marginTop: 10 }}>
              <Form.Item
                name='state'>
                <Select placeholder="账变类型">
                  <Option value="账变类型">账变类型</Option>
                  <Option value="入金账变">入金账变</Option>
                  <Option value="代付账变">代付账变</Option>
                  <Option value="手动上分">手动上分</Option>
                  <Option value="手动下分">手动下分</Option>
                  <Option value="体现">体现</Option>
                  <Option value="充值">充值</Option>
                  <Option value="其他">其他</Option>
                </Select>
              </Form.Item>
            </Col>




            <Col span={7} style={{ marginTop: 10 }}>
              <Form.Item
                name='起止时间'>
                <RangePicker />
              </Form.Item>
            </Col>





            <Col span={5} style={{ marginTop: 10 }}>
              <Form.Item>
                <Button type="primary" htmlType='submit' icon={<SearchOutlined />}>
                  搜索
                </Button>
              </Form.Item>
            </Col>

          </Form>


          <br />

          <Table pagination={{ showSizeChanger: true, showQuickJumper: true, onShowSizeChange: (curret, pageSize) => (getPages(curret, pageSize)) }}
            columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} rowSelection={{
              type: 'checkbox',
              ...rowSelection,

            }} />
        </ConfigProvider>
      </div>
    </div>
  )
}
